<template>
	<view>
		<view class="nav">
			<view class="navBar" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav-item" v-if="isActive==0">
			<block v-for="(item, index) in productList" :key="index">
				<view class="produt">
					<view class="item1">
						<image :src="item.image" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
						<view class="prouct-info">
							<text style="font-size: 30rpx;color: #1A1A1A;">{{item.name}}</text>
							<text style="font-size: 20rpx;color: #666666;">库存：{{item.kucun}}</text>
							<text style="font-size: 20rpx;color: #666666;">已售：{{item.sales}}</text>
						</view>
						<image src="@/static/del.png" style="width: 30rpx;height: 31rpx;margin-right: 19rpx;margin-left: auto;"></image>
					</view>
					<view class="item2">
						<text style="font-size: 30rpx;color: #FF3030;">￥{{item.price}}</text>
						<view class="button">
							<button class="text">编辑商品</button>
							<button class="text" style="margin-left: 30rpx;">下架商品</button>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-if="isActive==1">
			
		</view>
		<view v-if="isActive==2"></view>
		<view v-if="isActive==3"></view>
		<view v-if="isActive==4"></view>
		<view v-if="isActive==5"></view>
	</view>
</template>

<script>
export default {
  data() {
	  return {
		  isActive:0,
		  navList:[
			  {
				index:0,
				title:'分类1'
			  },
			  {
				index:1,
				title:'分类2'
			  },
			  {
			  	index:2,
			  	title:'分类3'
			  },
			  {
			  	index:3,
			  	title:'分类4'
			  },
			  {
			  	index:4,
			  	title:'分类5'
			  },
			  {
			  	index:5,
			  	title:'分类6'
			  }
		  ],
	      productList:[
			  {
				  image:require("@/static/meat.png"),
				  name:'带皮五花肉(300g)',
				  kucun:1646,
				  sales:100,
				  price:14.80
			  },
			  {
			  	  image:require("@/static/meat.png"),
			  	  name:'带皮五花肉(300g)',
			  	  kucun:1646,
			  	  sales:100,
			  	  price:14.80
			  }
		  ]
	  }
  },
  methods:{
	  checked(index){
		  this.isActive = index
	  }
  }
}
</script>
<style>
	.nav {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.nav .navBar {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	.active {
		position: relative;
		color: #1B1B1B;
	}
	.active::after {
		content: '';
		position: absolute;
		background: #FEB140;
		width: 60rpx;
		height: 4rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
	.nav-item {
		width: 100%;
		height: 100%;
	}
	.produt {
		width: 690rpx; 
		height: 190rpx; 
		background: #FFFFFF;
		border-radius: 10rpx;
		/* margin: 30rpx 30rpx 20rpx; */
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.produt:first-child {
		margin-top: 30rpx;
	}
	.item1 {
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		padding-top: 20rpx;
	}
	.prouct-info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		line-height: 40rpx;
		margin-left: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item2 {
		margin-left: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.text {
		width: 160rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #FEB140;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #1A1A1A;
		float: left;
	}
</style>
